<template>
	<view class="myUserInfoContainer">
		<!-- 顶部头像 -->
		<userLoginStatus></userLoginStatus>
		<!-- 用户订单 -->
		<view class="userCenter">
			<view class="userCenterTop">
				我的订单
			</view>
			<view class="userBtn">
				<view class="userBtnItem" v-for="(order,i) in userOrderList" :key="i" @tap="toMyOrders(i)">
					<uni-icons :type="order.iconType" size="40">
					</uni-icons>
					<text>{{order.containText}}</text>
				</view>
			</view>


		</view>


		<!-- 收藏  不知道显示什么先放着 -->
		<view class="userFavorities">
			<view class="userFavoritiesTop" v-if="token!==''&& token!==null" @tap="toUserFavorities">
				我的收藏
				<text style="float: right; font-size: 25rpx; padding-right: 30rpx; font-weight:300;">查看全部></text>
			</view>
			<view class="userFavoritiesTop" v-else @tap="toLogin">
				我的收藏
				<text style="float: right; font-size: 25rpx; padding-right: 30rpx; font-weight:300;">查看全部></text>
			</view>
			<view class="userFavoritiesCenter" @tap="toLogin" v-if="token!==''&& token!==null">
				<view class="userFavoritiesContain" v-for="(item,index) in userFavOnMy" :key="index">
					<u--image v-if="item.activityImagePath.imgSrc!==''" :src="item.activityImagePath.imgSrc"
						width="200rpx" height="145rpx"
						@tap="detailFavority(item.activityImagePath.activityId)"></u--image>
					<view v-else style="width: 200rpx; height: 145rpx; ">
					</view>
				</view>
			</view>
			<view v-else>
				<view style="background-color: #f4f4f4; align-items: center;
				height: 158rpx;border-radius: 60rpx; display: flex; justify-content: center; " @tap="toLogin">
					<view style="color: #bababa;">
						您还未登录，请登录后查看收藏
					</view>
				</view>
			</view>
		</view>



		<!-- 用户行为 -->
		<view class="userOperation">
			<u-cell-group v-if="token!==null && token!==''">
				<u-cell icon="setting" title="账号设置" isLink url="/subpkg/userOperationSetting/userOperationSetting"
					size="large"></u-cell>
				<u-cell icon="red-packet" title="我的荣誉" isLink url="/subpkg/userOperationHonor/userOperationHonor"
					size="large"></u-cell>
				<u-cell icon="coupon" title="我的优惠券" size="large" isLink
					url="/subpkg/userOperationCoupon/userOperationCoupon"></u-cell>
				<u-cell icon="weixin-circle-fill" title="联系客服" size="large">
					<view slot="value" class="u-slot-title">
						<u-button throttleTime="500" open-type="contact" plain hairline text="点击此处"></u-button>
					</view>
				</u-cell>
				<u-cell icon="close-circle" title="退出登录" size="large" isLink @click="isExit"></u-cell>
			</u-cell-group>
			<u-cell-group v-else>
				<u-cell icon="setting" title="账号设置" isLink url="/subpkg/loginPage/loginPage" size="large"></u-cell>
				<u-cell icon="red-packet" title="我的荣誉" isLink url="/subpkg/loginPage/loginPage" size="large"></u-cell>
				<u-cell icon="coupon" title="我的优惠券" size="large" isLink url="/subpkg/loginPage/loginPage"></u-cell>
				<u-cell icon="weixin-circle-fill" title="联系客服" size="large" isLink
					url="/subpkg/loginPage/loginPage"></u-cell>
			</u-cell-group>

		</view>

		<!-- 退出登录的模态框 -->
		<u-modal :show="exitShow" title="智慧研途" closeOnClickOverlay="true" @confirm="exit" @close="closeModal"
			@cancel="closeModal" showCancelButton="true" content='真的要退出吗'></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		mapMutations
	} from 'vuex'
	import {
		eventBus
	} from '@/eventBus.js';
	export default {
		name: "userPage",
		data() {
			return {
				exitShow: false,
				query: {
					page: 1,
					pageSize: 3,
					userId: null
				},
				userMessage: {
					name: "",
					avatar: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
				},
				userOrderList: [{
					iconType: "home",
					containText: "待付款"
				}, {
					iconType: "map-pin-ellipse",
					containText: "待出行"
				}, {
					iconType: "notification",
					containText: "进行中"
				}, {
					iconType: "vip",
					containText: "已结束"
				}, {
					iconType: "person",
					containText: "全部订单"
				}],
				userFavOnMy: [{
					activityImagePath: {
						imgSrc: "",
						activityId: -1
					}
				}, {
					activityImagePath: {
						imgSrc: "",
						activityId: -1
					}
				}, {
					activityImagePath: {
						imgSrc: "",
						activityId: -1
					}
				}],
				isUpdateDate: {
					isAdd: null,
					idData: null
				}
			};
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateUserId']),
			...mapMutations('timeArray', ['updateTimeArray']),
			...mapMutations('messageArray', ['updateMessageArray']),
			closeModal() {
				this.exitShow = false
			},
			isExit() {
				this.exitShow = true
			},
			exit() {
				// 初始化vuex里的数据
				this.updateTimeArray([])
				this.updateMessageArray({})
				this.updateUserId('')
				this.updateToken('')
				this.updateUserInfo(JSON.parse(`{"data":{
										"code":null,
											"data":{
												"avatar":null,
												"createTime":null,
												"id":null,
												"idNumber":null,
												"name":null,
												"openid":null,
												"phone":null,
												"sex":null},
												"msg":null
												}}`))
				uni.clearStorageSync()
				this.exitShow = false
				setTimeout(() => {
					uni.switchTab({
						url: "/pages/home/home"
					})
				}, 500)
				return uni.showToast({
					title: '退出成功'
				})
			},
			toMyOrders(i) {
				uni.navigateTo({
					// 传递功能识别参数
					url: "/subpkg/myOrders/myOrders?orderType=" + i
				});
			},
			async getUserFavorities() {
				let userFavorities = {
					data: {
						code: -1
					}
				}
				if (this.token !== '' && this.token !== null) {
					// 得到用户收藏
					this.query.userId = this.userId

					userFavorities = await uni.$u.http.post("/user/activity/collection/list", this.query, {
						custom: {
							auth: true
						}
					}).catch(() => {
						return uni.showToast({
							title: "请求错误",
							icon: 'error'
						})
					})
					if (userFavorities.length !== 2) {
						if (userFavorities.data.code == 1) {
							let userFavoritiesList = userFavorities.data.data.records
							// 判断收藏列表长度是否为3
							let favList = userFavoritiesList.slice(0, 3)
							if (favList.length == 3) {
								this.userFavOnMy = userFavoritiesList.slice(0, 3)
							} else {
								for (var i = 0; i < favList.length; i++) {
									this.userFavOnMy[i] = favList[i]
								}
							}
						}
					} else {
						return null
					}
				}
			},
			toLogin() {
				if (this.token == '' || this.token == null) {
					uni.navigateTo({
						url: "/subpkg/loginPage/loginPage"
					});

				}
			},
			toUserFavorities() {
				uni.navigateTo({
					url: "/subpkg/userFavorities/userFavorities"
				})
			},
			detailFavority(activityId) {
				if (activityId !== -1) {
					uni.navigateTo({
						url: '/subpkg/detailLine/detailLine?activityId=' + activityId
					})
				} else {
					uni.showToast({
						title: '您还未收藏活动',
						icon: 'error',
						duration: 1000
					})
				}
			}
		},
		beforeMount() {
			this.getUserFavorities();
		},
		mounted() {
			if (this.token !== '' && this.token !== null) {
				if (this.userInfo.data.data.avatar !== null) {
					this.userMessage.avatar = this.userInfo.data.data.avatar
				}
				this.userMessage.name = this.userInfo.data.data.name
				if (this.userMessage.name == null) {
					this.userMessage.name = "（请设置昵称）"
				}
			}
		},
		watch: {
			// 侦听currentOrderType的值的变化，如果有变就进行查询， 第一次进来也会查询
			isUpdateDate: {
				handler(newValue, oldValue) {
					let idArr = []
					for (let s of this.userFavOnMy) {
						idArr.push(s.id)
					}
					console.log(this.userFavOnMy);
					// 如果存在且操作为删除
					if (idArr.indexOf(+newValue.idData) !== -1 && newValue.isAdd == false) {
						this.userFavOnMy.splice(this.userFavOnMy.indexOf(+newValue.idData), 1);
						// 删除后在末尾加上默认值		
						this.userFavOnMy.push({
							activityImagePath: {
								imgSrc: "",
								activityId: -1
							}
						})
					}
					this.getUserFavorities()
				}
			}
		},
		beforeUpdate() {
			eventBus.$on('updateMyPage', value => {
				this.isUpdateDate = value
			});
		},
		updated() {
			//不加这个改变的收藏栏会失效
		},
		computed: {
			...mapState('m_user', ['token', 'userId', 'userInfo']),
		}
	}
</script>

<style lang="scss" scoped>
	.myUserInfoContainer {
		height: 100%;
		background-color: #f4f4f4;

		.userCenter {
			height: 230rpx;
			background-color: #f4f4f4;
			display: flex;
			margin-left: 20rpx;
			width: 95%;
			flex-direction: column;
			align-items: center;
			border-radius: 30rpx;
			box-shadow: 0 20rpx 20rpx rgba(0, 0, 0, 0.1),
				6rpx -1.5rpx 0rpx 0rpx rgba(0, 0, 0, 0.15), ;

			.userCenterTop {
				width: 100%;
				padding-left: 20px;
				font-weight: bold;
				align-items: center;
				height: 50rpx;
				line-height: 50rpx;
			}

			.userBtn {
				margin-top: 5px;
				width: 100%;
				align-items: center;
				height: 130rpx;
				background-color: #f4f4f4;
				display: flex;
				justify-content: space-around;

				.userBtnItem {
					display: flex;
					align-items: center;
					flex-direction: column;
					font-size: 70%;
				}
			}
		}

		.userFavorities {
			margin-left: 20rpx;
			margin-top: 40rpx;
			background-color: #f4f4f4;
			display: flex;
			flex-direction: column;
			width: 95%;
			border-radius: 30rpx;
			box-shadow: 0 20rpx 20rpx rgba(0, 0, 0, 0.1),
				6rpx -1.5rpx 0rpx 0rpx rgba(0, 0, 0, 0.15), ;

			.userFavoritiesTop {
				width: 100%;
				padding-top: 5rpx;
				padding-bottom: 4rpx;
				padding-left: 27rpx;
				font-weight: bold;
				align-items: center;
				height: 50rpx;
				line-height: 50rpx;
			}

			.userFavoritiesCenter {
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.userFavoritiesContain {
					padding-bottom: 15rpx;
					margin-left: 22rpx;
					width: 28%;
					height: 80%;
				}
			}
		}

		.userOperation {
			padding-top: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

		}


	}
</style>